<template>
  <div style="overflow: hidden">
    <div class="title">基层治理四平台活力指数</div>

    <div class="date">
      <el-date-picker
        v-model="defaultRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChange"
      >
      </el-date-picker>
    </div>

    <div id="vitalityChart"></div>
  </div>
</template>

<script>
import { getVitalityTrend } from "../../utils/api";
export default {
  name: "vitality",
  data() {
    return {
      startTime: this.Tebs.getBeforeDate(179) + " 00:00:00",
      endTime: this.Tebs.date2String_OnlyDate(new Date()) + " 23:59:59",
      defaultRange: [],
      xData: [],
      yData: [],
    };
  },
  mounted() {
    this.defaultRange = [this.startTime, this.endTime];
    this.getData()
  },
  methods: {
    setEchart() {
      let myChart = this.$echarts.init(
        document.getElementById("vitalityChart")
      );
      myChart.setOption({
        grid: {
          right: 30,
          top: 30,
          bottom: 35,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 20,
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              interval: 0,

              textStyle: {
                fontSize: 16,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            interval: 20,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 16,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              //网格线
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#08D79A", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(36, 255, 211, 0)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
              },
            },
            data: this.yData,
          },
        ],
      });
    },
    getData() {
      getVitalityTrend(
        "startTime=" + this.startTime + "&endTime=" + this.endTime
      ).then((res) => {
        if (res.data.status === 200) {
          this.xData = [];
          this.yData = [];
          for (let i = 0, l = res.data.data.length; i < l; i++) {
            this.xData.push(res.data.data[i].NAME);
            this.yData.push(res.data.data[i].VALUE);
            this.setEchart();
          }
        }
      });
    },
    handleChange(value) {
      this.startTime = this.Tebs.date2String_OnlyDate(value[0]) + " 00:00:00";
      this.endTime = this.Tebs.date2String_OnlyDate(value[1]) + " 23:59:59";
      this.getData()
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
}

.el-range-editor {
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  opacity: 0.8;
  width: 94%;
  margin-left: 3%;
  margin-top: 10px;
}

#vitalityChart {
  width: 100%;
  height: 250px;
}
</style>
